<template>
  <div class="all">
    <van-sticky class="header" :offset-top="0">
      <van-nav-bar title="基本信息"  left-arrow>
      <template #left>
      <span class="fanhui" @click="back()">
        <img src="../../assets/fff返回.png" alt="">
        返回
<!--        <span class="sides">返回</span>-->
      </span>
      </template>
      <template #right>
        <span style="color: #fff;font-size: 15px;font-family: PingFang SC;font-weight: bold;" v-show="isAdd == 1"
              @click="keep()">保存</span>
        <span style="color: #fff;font-size: 15px;font-family: PingFang SC;font-weight: bold;" v-show="isAdd == 0 && isEdit === 1"
              @click="xiugai()">修改</span>
      </template>
    </van-nav-bar>
    </van-sticky>
    <div class="content">
      <van-field
        v-model="name"
        label="* 姓名"
        placeholder="请输入姓名"
        input-align="right"
        :readonly="readonly"
      />
      <van-field
        label="* 性别"
        v-show="isAdd == 0"
        readonly>
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal" >
            <van-radio name="1" disabled >男</van-radio>
            <van-radio name="2" disabled  >女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-show="isAdd == 0"
        v-model="age"
        label="* 年龄"
        placeholder="请输入年龄"
        input-align="right"
        readonly
      />
      <van-field
        v-show="isAdd == 0"
        v-model="birthday"
        label="* 出生日期"
        placeholder="出生日期"
        input-align="right"
        readonly
      >
<!--        <template #right-icon>-->
<!--          <van-icon name="arrow-down" v-show="isAdd == 1"/>-->
<!--        </template>-->
      </van-field>
      <van-field
        v-model="shenfenzhenghao"
        label= "* 身份证号"
        placeholder="请输入身份证号"
        input-align="right"
        :readonly="readonly"
      />
      <van-field
        v-model="address"
        label= "* 家庭住址"
        placeholder="请选择家庭住址"
        input-align="right"
        @click="addressShow"
        :click="{addressShow : isAdd == 0}"
        readonly
      >
<!--        :readonly="readonly"-->
        <template #right-icon>
          <van-icon name="arrow-down" />
        </template>
      </van-field>
      <van-field
        v-model="xiangxiaddress"
        label= "* 详细住址"
        placeholder="请填写详细住址"
        input-align="right"
        :readonly="readonly"
      />
      <van-field
        v-model="phone"
        label="* 联系电话"
        placeholder="请输入联系电话"
        input-align="right"
        :readonly="readonly"
      />
      <van-field
        v-model="emergencycontact"
        label="紧急联系人"
        placeholder="请输入紧急联系人"
        input-align="right"
        :readonly="readonly"
      />
      <van-field
        v-model="emergencycontactphone"
        label="紧急联系人电话"
        placeholder="请输入紧急联系人电话"
        input-align="right"
        :readonly="readonly"
      />
      <van-field
        v-model="familydoctor"
        label="家庭医生"
        placeholder="请输入家庭医生"
        input-align="right"
        :readonly="readonly"
      />
      <van-field
        v-model="physicalcondition"
        label="身体状况"
        placeholder="请输入身体状况"
        input-align="right"
        :readonly="readonly"
      />
      <van-field
        v-model="sleep"
        label="睡眠质量"
        placeholder="请输入睡眠质量"
        input-align="right"
        readonly
        @click="clickSleepShow"
      >
        <template #right-icon>
          <van-icon name="arrow-down" />
<!--          <van-icon name="arrow-up" />-->
        </template>
      </van-field>
      <van-field
        v-model="livingenvironment"
        label="居住环境"
        placeholder="请输入居住环境"
        input-align="right"
        :readonly="readonly"
      />
      <van-field
        v-model="activity"
        label="活动频率"
        placeholder="请输入活动情况"
        input-align="right"
        :readonly="readonly"
      />
      <van-field
        v-model="eat"
        label="饮食习惯"
        placeholder="请输入饮食习惯"
        input-align="right"
        readonly
        @click="clickEatShow()"
      >
        <template #right-icon>
          <van-icon name="arrow-down" />
        </template>
      </van-field>
      <p style="height: 44px;color: red;font-size: 13px;display: flex;align-items: center;margin: 0px 15px"> * 内容为必填项</p>
    </div>
    <van-popup round class="place"   v-model="show" position="bottom" >
      <van-area item-height="15vw" @cancel="cancel" @confirm="onAreaConfirm" title="请选择家庭住址" :area-list="areaList" />
    </van-popup>
    <van-popup round v-model="dateShow" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择出生年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="NoDate()"
        @confirm="onDateConfirm"
      />
    </van-popup>
    <van-popup round class="place"   v-model="eatShow" position="bottom" :style="{ height: '50%' }" >
      <van-picker show-toolbar
                  @cancel="eatShow = false"
                  @confirm="eatConfirm"
                  :columns="eatColumns"
                  title="请选择饮食习惯"></van-picker>
    </van-popup>
    <van-popup round class="place"   v-model="sleepShow" position="bottom" :style="{ height: '50%' }" >
      <van-picker show-toolbar
                  @cancel="sleepShow = false"
                  @confirm="sleepConfirm"
                  :columns="sleepColumns"
                  title="请选择睡眠质量"></van-picker>
    </van-popup>
  </div>
</template>

<script>
import $ from 'jquery'
import area from '../../components/China/area'
// import axios from 'axios'
import {Toast} from 'vant'
export default {
  name: 'Profiles',
  data () {
    return {
      dateShow: false, // 出生日期弹窗 是否显示
      show: false, // 地址弹窗 是否显示
      areaList: area, // 存储全国地址
      radio: '0', // 性别
      radio1: '', // 性别对比值
      name: '', // 姓名
      shenfenzhenghao: '', // 身份证号
      age: '', // 年龄
      birthday: '', // 出生日期
      address: '', // 家庭地址
      xiangxiaddress: '', // 详细住址
      phone: '', // 联系电话
      emergencycontact: '', // 紧急联系人
      emergencycontactphone: '', // 紧急联系人电话
      familydoctor: '', // 家庭医生
      physicalcondition: '', // 身体状况
      sleep: '', // 睡眠质量
      livingenvironment: '', // 居住环境
      activity: '', // 活动情况
      eat: '', // 饮食习惯
      isAdd: '',
      userid: '',
      id: '',
      readonly: true,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      NowID: '',
      eatShow: false,
      eatColumns: ['荤素均衡', '素食为主', '荤食为主', '素食主义者'],
      sleepShow: false,
      sleepColumns: ['良好', '一般', '较差'],
      isEdit: Number(this.$route.query.isEdit),
      team_id: this.$route.query.team_id,
      doc_user_id: this.$route.query.doc_user_id
    }
  },
  mounted () {
    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    this.isAdd = this.$utils.getUrlKey('isAdd')
    this.id = this.$utils.getUrlKey('id')
    this.NowID = this.$utils.getUrlKey('NowID')
    $('.content').css('height', $(window).height() - $('.content').offset().top + 'px')
    // if (this.isAdd === '0') {
    //   this.getTuomin()
    //   this.readonly = true
    // } else if (this.isAdd === '1') {
    //   this.readonly = false
    //   if (this.isAdd === '1' && (this.id !== null && this.id !== undefined && this.id !== '')) {
    //     this.getPeople(this.id)
    //   }
    // } else if (this.isAdd === '' || this.isAdd === null || this.isAdd === undefined) {
    //   this.getTuomin()
    //   this.readonly = true
    // }
    if (this.isAdd === '1') {
      this.readonly = false
    }
    if (this.id !== 0 && this.NowID) {
      this.getTuomin()
    }
    // if (this.isEdit === '' || this.isEdit === null || this.isEdit === undefined || this.isEdit === 0) {
    //   this.readonly = true
    // }
  },
  methods: {
    // 点击睡眠质量
    clickSleepShow () {
      if (this.isAdd === '0') {
        this.sleepShow = false
      } else if (this.isAdd === '1') {
        this.sleepShow = true
      }
    },
    // 点击饮食习惯
    clickEatShow () {
      if (this.isAdd === '0') {
        this.eatShow = false
      } else if (this.isAdd === '1') {
        this.eatShow = true
      }
    },
    // 饮食选择确认按钮
    eatConfirm (value) {
      this.eat = value
      this.eatShow = false
    },
    // 睡眠质量确认按钮
    sleepConfirm (value) {
      this.sleep = value
      this.sleepShow = false
    },
    // 脱敏
    getTuomin () {
      // var id
      // if (this.NowID !== null && this.NowID !== '' && this.NowID !== undefined) {
      //   id = this.NowID
      // } else {
      //   id = this.userid
      // }
      this.$http.findUserXinXiTuoMin({'data_user_id': this.NowID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.name = res.data.data.name
            if (res.data.data.SEX !== undefined && res.data.data.SEX !== null && res.data.data.SEX !== '') {
              this.radio = res.data.data.SEX.toString()
            }
            this.radio = res.data.data.sex.toString()
            this.age = res.data.data.age + '岁'
            this.birthday = res.data.data.chushengriqi
            this.shenfenzhenghao = res.data.data.shenfenzhenghao
            this.address = res.data.data.LOCATION
            this.xiangxiaddress = res.data.data.xinghaotihuan
            this.phone = res.data.data.phone
            this.emergencycontact = res.data.data.emergencycontact
            this.emergencycontactphone = res.data.data.emergencycontactphone
            this.familydoctor = res.data.data.familydoctor
            this.physicalcondition = res.data.data.physicalcondition
            this.sleep = res.data.data.sleep
            this.livingenvironment = res.data.data.livingenvironment
            this.activity = res.data.data.activity
            this.eat = res.data.data.eatinghabits

            this.id = res.data.data.id
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 不脱敏
    getPeople (id) {
      this.$http.findOnehealthFormationpeople({data_user_id: this.NowID})
        .then(res => {
          console.log(res)
          this.name = res.data.name
          this.radio = res.data.sex.toString()
          this.age = res.data.age + '岁'
          this.birthday = res.data.birthday
          this.shenfenzhenghao = res.data.shenfenzhenghao
          this.address = res.data.address
          this.xiangxiaddress = res.data.xiangxiaddress
          this.phone = res.data.phone
          this.emergencycontact = res.data.emergencycontact
          this.emergencycontactphone = res.data.emergencycontactphone
          this.familydoctor = res.data.familydoctor
          this.physicalcondition = res.data.physicalcondition
          this.sleep = res.data.sleep
          this.livingenvironment = res.data.livingenvironment
          this.activity = res.data.activity
          this.eat = res.data.eatinghabits
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 地址选择取消
    cancel () {
      this.show = false
    },
    NoDate () {
      this.dateShow = false
    },
    // 获取住址
    onAreaConfirm (val) {
      this.show = false
      // 获取地区
      var addInfo = val[0].name + val[1].name + val[2].name
      this.address = addInfo
    },
    // 获取出生日期
    onDateConfirm (val) {
      this.dateShow = false
      this.birthday = this.formatDate(val)
    },
    formatDate (date) {
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      return YY + MM + DD
    },
    // 点击住址展示
    addressShow () {
      if (this.isAdd === '0') {
        this.show = false
      } else if (this.isAdd === '1') {
        this.show = true
      }
    },
    // 点击出生日期展示
    birthdayShow () {
      if (this.isAdd === '0') {
        this.dateShow = false
      } else if (this.isAdd === '1') {
        this.dateShow = true
      }
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 保存
    keep () {
      if (this.name === '') {
        Toast('请填写姓名')
      } else if (this.shenfenzhenghao === '' || /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(this.shenfenzhenghao) !== true) {
        if (this.shenfenzhenghao === '') {
          this.$toast('身份证号不能为空')
        } else if
        (/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(this.shenfenzhenghao) !== true) {
          this.$toast('身份证号格式不正确')
        }
      } else if (this.address === '') {
        Toast('请填写家庭住址')
      } else if (this.xiangxiaddress === '') {
        Toast('请填写详细住址')
      } else if (this.phone === '') {
        Toast('请输入手机号码')
      } else {
        // axios.get('http://jmx-kfdj.com:7088/disablerboot/healthFormationpeople/savehealthFormationpeople',
        this.$http.savehealthFormationpeople(
          {
            name: this.name,
            // sex: Number(this.radio),
            // birthday: this.birthday,
            shenfenzhenghao: this.shenfenzhenghao,
            address: this.address,
            xiangxiaddress: this.xiangxiaddress,
            phone: this.phone,
            emergencycontact: this.emergencycontact,
            emergencycontactphone: this.emergencycontactphone,
            familydoctor: this.familydoctor,
            physicalcondition: this.physicalcondition,
            sleep: this.sleep,
            livingenvironment: this.livingenvironment,
            activity: this.activity,
            eatinghabits: this.eat,
            userid: this.userid,
            id: Number(this.id)
          })
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              if (Number(this.id) === 0) {
                Toast.success('保存成功')
              } else {
                Toast.success('修改成功')
              }
              let obj
              if (this.doc_user_id) {
                obj = {
                  team_id: this.team_id,
                  data_user_id: res.data.data.jmx_user_id,
                  doc_user_id: this.doc_user_id
                }
              } else {
                obj = {
                  team_id: this.team_id,
                  data_user_id: res.data.data.jmx_user_id
                }
              }

              if (this.team_id) {
                this.$http.saveTeamHealth(obj)
                  .then(res => {
                    console.log(res)
                    if (res.data.status === 'success') {
                    } else {
                      this.$toast(res.data.msg)
                    }
                  })
                  .catch(err => {
                    console.log(err)
                    this.$toast('您的网络有些拥挤，请稍后再试')
                  })
              }
              // this.$router.go(-1)
              this.isAdd = -1
            } else if (res.data.status === 'error') {
              Toast.fail(res.data.msg)
              // Toast(res.data.error)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    // 点击修改
    xiugai () {
      this.isAdd = '1'
      this.readonly = false
      this.getPeople(this.id)
    }
  }
}
</script>

<style scoped>
  .all{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .fanhui{
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #ffffff;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .fanhui  img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
  }
  .sides{
    font-size: 15px;
    color: #fff;
  }
  .title {
    font-size: 17px;
  }
  /deep/ .van-field__control--custom{
    flex-direction: row-reverse;
  }
  /deep/ .van-radio--horizontal {
    /* margin-right: 12px; */
    margin-left: 12px;
  }
  /deep/ .van-field__body {
    display: flex;
    /*flex-direction: row-reverse;*/
  }
  /deep/ .van-nav-bar{
    height: 44px;
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
  }
  /deep/ .van-nav-bar__content{
    width: 100%;
    height: 100%;
  }
  /deep/ .van-nav-bar__title{
    font-size: 15px;
    color: #fff;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .content {
    width: 100%;
    overflow: auto;
    background: #FAF9FE;
    box-sizing: border-box;
  }
  /deep/ .van-cell::after{
    border-bottom: 1.5px solid #ebedf0;
  }
  /deep/ .van-field__label{
    width: 9.2em;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  /deep/ .van-field__control--right, /deep/ .van-radio__label{
    color: #999;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
  /deep/ .van-radio__icon--checked .van-icon {
    color: #fff;
    background-color: #1989fa;
    border-color: #1989fa;
  }
  /deep/ .van-nav-bar__left, /deep/ .van-nav-bar__right {
    padding: 0 15px;
  }
  /deep/ .van-picker__confirm {
    color: #1DA4F2;
  }
  /deep/ .van-field__label{
    font-size: 15px;
  }
  /deep/ .van-field__control--right, /deep/ .van-radio__label {
    font-size: 15px;
  }
</style>
